<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>花店商城</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
        .navbar {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="${pageContext.request.contextPath}/shop">花店商城</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/shop/cart">购物车</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/shop/orders">我的订单</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <c:if test="${sessionScope.user.role == 'admin'}">
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/flower">后台管理</a>
                        </li>
                    </c:if>
                    <c:if test="${sessionScope.user != null}">
                        <li class="nav-item">
                            <span class="nav-link">欢迎, ${sessionScope.user.username}</span>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/shop/logout">退出</a>
                        </li>
                    </c:if>
                    <c:if test="${sessionScope.user == null}">
                        <li class="nav-item">
                            <a class="nav-link" href="${pageContext.request.contextPath}/shop/login">登录</a>
                        </li>
                    </c:if>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <!-- 左侧分类菜单 -->
            <div class="col-md-3">
                <div class="list-group">
                    <a href="${pageContext.request.contextPath}/shop" 
                       class="list-group-item list-group-item-action ${empty param.categoryId ? 'active' : ''}">
                        全部分类
                    </a>
                    <c:forEach items="${categories}" var="category">
                        <a href="${pageContext.request.contextPath}/shop?categoryId=${category.id}" 
                           class="list-group-item list-group-item-action ${param.categoryId == category.id ? 'active' : ''}">
                            ${category.name}
                        </a>
                    </c:forEach>
                </div>
            </div>

            <!-- 右侧商品列表 -->
            <div class="col-md-9">
                <div class="row row-cols-1 row-cols-md-3 g-4">
                    <c:forEach items="${flowers}" var="flower">
                        <div class="col">
                            <div class="card h-100">
                                <img src="${flower.imageUrl}" class="card-img-top" alt="${flower.name}"
                                     onerror="this.src='https://via.placeholder.com/200x200?text=暂无图片'">
                                <div class="card-body">
                                    <h5 class="card-title">${flower.name}</h5>
                                    <p class="card-text">${flower.description}</p>
                                    <p class="card-text">
                                        <small class="text-muted">库存: ${flower.stock}</small>
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-danger fs-4">￥${flower.price}</span>
                                        <button onclick="addToCart(${flower.id})" class="btn btn-primary">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        function addToCart(flowerId) {
            if (${sessionScope.user == null}) {
                window.location.href = "${pageContext.request.contextPath}/shop/login";
                return;
            }
            $.post("${pageContext.request.contextPath}/shop/cart/add", {
                flowerId: flowerId,
                quantity: 1
            }, function(response) {
                if (response.success) {
                    alert("添加成功！");
                } else {
                    alert(response.message || "添加失败，请重试");
                }
            });
        }
    </script>
</body>
</html> 